<template>
  <van-popup
    v-model="show"
    round
    closeable
    position="bottom"
    @close="resetData"
  >
    <van-cell class="cell-title cell-text" title="添加跟进信息"> </van-cell>
    <van-form>
      <div class="img-icon-box">
        <van-field
          v-model="message"
          rows="4"
          type="textarea"
          placeholder="请输入内容"
        />
        <van-cell class="vanCell" title="图片"> </van-cell>
        <van-uploader
          :after-read="afterRead"
          @delete="deleteFile"
          v-model="fileList"
          multiple
          accept=".jpg, .jpeg, .png, .gif, .JPG, .JPEG, .PNG"
        >
        </van-uploader>
      </div>
      <div class="btn-save-box">
        <van-button class="btn-save" type="primary" @click="submitFllow" block
          >保存</van-button
        >
      </div>
    </van-form>
  </van-popup>
</template>

<script>
import { upFile } from "@/api/dict";
export default {
  name: "VanSkeleton",

  data() {
    return {
      show: false,
      message: "",
      imgUrl: [],
      fileList: undefined,
      fid: undefined
    };
  },
  methods: {
    init(info) {
      if (info.id) {
        this.message = info.notice;
        this.imgUrl = info.img.split(",");
        let fileList = [];

        this.imgUrl.length > 0 &&
          this.imgUrl.map(item => {
            fileList.push({ url: item });
          });
        this.fid = info.id;
        this.fileList = fileList;
      } else {
        this.message = undefined;
        this.imgUrl = [];
        this.fid = undefined;
        this.fileList = undefined;
      }
      this.show = true;
    },
    clsoe() {
      this.show = false;
    },
    onChange() {
      console.log(this.result);
    },
    resetData() {
      this.message = "";
      this.fileList = undefined;
    },
    deleteFile(file) {
      this.imgUrl.map((item, index) => {
        if (item === file.url) {
          this.imgUrl.splice(index, 1);
        }
      });
    },
    submitFllow() {
      let params = {
        img: this.imgUrl.join(","),
        notice: this.message,
        fid: this.fid
      };
      this.$emit("uploadData", params);
    },
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      if (file.length && file.length > 0) {
        file.map(item => {
          this.upFile(item);
        });
      } else {
        this.upFile(file);
      }
    },
    upFile(file) {
      let form = new FormData();
      form.append("file", file.file);
      upFile(form).then(res => {
        if (res.status === 1) {
          file.status = "done";
          file.message = "上传成功";
          this.imgUrl.push(res.data.src);
          this.fileList.forEach(item => {
            if (item.file === file.file) {
              item.url = res.data.src;
            }
          });
        } else {
          this.$toast.fail("图片上传失败，请重新上传");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.cell-title {
  font-size: 32px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
::v-deep .van-cell::after {
  border-bottom: 0;
}

.activeIcon {
  background: #edf4ff;
  border-radius: 8px;
  border: 1px solid #FF6900;
  color: #FF6900;
}
.img-icon-box {
  max-height: calc(50vh);
  padding: 0 24px 23px;
  overflow: auto;
  ::v-deep .van-field {
    background: #f2f2f2;
    border-radius: 8px;
    font-size: 34px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #b2b2b2;
    line-height: 48px;
  }
  ::v-deep .vanCell {
    padding-left: 0;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
  }
}
.btn-save-box {
  margin-top: 40px;
  padding: 0 40px 23px;
}
.title {
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 40px;
  padding-top: 24px;
  padding-bottom: 16px;
}
.add-btn {
  font-size: 34px;
  display: block;
  margin: 0 auto;
  width: 180px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2176d9;
  line-height: 48px;
}
::v-deep .van-uploader__wrapper {
  align-items: center;
}
::v-deep .van-uploader {
  display: block;
}
::v-deep .van-popup__close-icon--top-right {
  font-size: 44px;
  color: #666;
}
</style>
